<template>
	<view class="service">
		<u-toast ref="uToast"></u-toast>
		<u-navbar :auto-back="true" :placeholder="true" title="服务商" class="unavbar" :bgColor="bgColor"></u-navbar>
		<view class="topBg">
			<u-image :src="mainBaseUrl + '/assets/xcx/service/topBg.png'" width="690rpx" radius="40rpx"></u-image>
		</view>
		<view class="update">
			<view class="text">-- 升级服务商</view>
			<view class="dot"></view>
		    <view class="text">享受更多权益 --</view>
		</view>
		<view class="vipquanyi">会员权益</view>
		<view class="iconbox">
			<view class="icon-item">
				<u-image src="/static/service/icon1.png" width="120rpx" height="120rpx"/>
				<view>更多权利</view>
			</view>
			<view class="icon-item">
				<u-image src="/static/service/icon2.png" width="120rpx" height="120rpx"/>
				<view>高分佣</view>
			</view>
			<view class="icon-item">
				<u-image src="/static/service/icon3.png" width="120rpx" height="120rpx"/>
				<view>高返利</view>
			</view>
			<view class="icon-item">
				<u-image src="/static/service/icon4.png" width="120rpx" height="120rpx"/>
				<view>授权证书</view>
			</view>
		</view>
		<view class="iconbox">
			<view class="icon-item">
				<u-image src="/static/service/icon5.png" width="120rpx" height="120rpx"/>
				<view>独家保护</view>
			</view>
			<view class="icon-item">
				<u-image src="/static/service/icon6.png" width="120rpx" height="120rpx"/>
				<view>资源扶持</view>
			</view>
			<view class="icon-item">
				<u-image src="/static/service/icon7.png" width="120rpx" height="120rpx"/>
				<view>独享贴牌</view>
			</view>
			<view class="icon-item">
				<u-image src="/static/service/icon8.png" width="120rpx" height="120rpx"/>
				<view>长期收益</view>
			</view>
		</view>
		<view class="vipquanyi">开通服务商</view>
		<view class="bottomimage">
			<u-image @click="changeType(1)" :src="mainBaseUrl + '/assets/xcx/service/icon11.png'" width="330rpx" height="200rpx" radius="20rpx"/>
			<u-image @click="changeType(2)" :src="mainBaseUrl + '/assets/xcx/service/icon12.png'" width="330rpx" height="200rpx" radius="20rpx"/>
		</view>
		<view class="open">
			<view class="title">{{ typeName[type] }}：<text class="money">￥{{ typeMoney[type - 1] }}</text></view>
			<u-button shape="circle" color="#05B9AE" @click="toBuy" text="立即开通"></u-button>
		</view>
	</view>
</template>

<script>
	import {serviceMerchat, openService} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				bgColor: '#45B9A2',
				type: 1,
				typeName: {1: '县区服务商', 2: '城市服务商'},
				typeMoney: [],
				form: {},
			}
		},
		async onLoad(options) {
			that = this;
			let res = await serviceMerchat();
			that.typeMoney = res.data;
		},
		onShow() {
			console.log('onshow')
		},
		onReachBottom() {
			
		},
		methods: {
			async toBuy(){
				// #ifdef MP-WEIXIN
				let codeInfo = await uni.login()
				that.form.code = codeInfo.code
				// #endif
				that.form.type = that.type;
				openService(that.form).then(res=>{
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						timeStamp: res.data.timeStamp + '',
						success(result) {
							that.$refs.uToast.show({
								type: "success",
								message: "购买成功",
								complete(){
									uni.navigateBack();
								}
							});
						},
						fail(result) {
							that.$refs.uToast.show({
								type: "error",
								message: "购买失败",
								complete(){
								}
							});
						},
					})
					// #endif
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			},
			changeType(type) {
				that.type = type;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service {
		padding: 0 30rpx;
		.topBg {
			margin: 30rpx auto 0;
		}
		.update {
			background: #05B9AE;
			border-radius: 16px;
			color: #ffffff;
		    display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			margin-top: 30rpx;
			.dot {
				width: 4px;
				height: 4px;
				background: #FFFFFF;
				border-radius: 50%;
			}
			.text {
				font-size: 36rpx;
			}
		}
		.vipquanyi {
			height: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 32rpx;
			color: #353535;
			line-height: 33rpx;
			margin-top:39rpx;
		}
		.iconbox {
			display: flex;
			justify-content: space-between;
			margin-top:32rpx;
			.icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
				font-family: Source Han Sans CN;
				font-size: 28rpx;
				// color: #474444;
			}
		}
		.bottomimage {
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
		}
		.open {
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			.title {
				width: 500rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #2F292D;
			}
			.money {
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 28rpx;
				color: #FF401A;
			}
		}
	}
</style>
